
<template>
  <page-view :title="'编号: ' + data.id" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    <detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
      <detail-list-item term="创建人">{{ data.applicant }}</detail-list-item>
      <detail-list-item term="申请部门">{{ department }}</detail-list-item>
      <detail-list-item term="创建时间">{{ data.time }}</detail-list-item>
      <detail-list-item term="备注">{{ data.description }}</detail-list-item>
    </detail-list>
    <a-row slot="extra" class="status-list">
      <a-col :xs="12" :sm="12">
        <div class="text">状态</div>
        <div class="heading">{{ status }}</div>
      </a-col>
    </a-row>
    <!-- actions -->
    <template slot="action">
      <a-button-group>
        <a-button type="danger" @click="reject" :disabled="this.data.state !== 0 ">驳回</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" @click="agree" :disabled="this.data.state !== 0">同意</a-button>
      </a-button-group>
    </template>

    <a-card :bordered="false" title="流程进度">
      <a-steps
        :direction="isMobile() && 'vertical' || 'horizontal'"
        :status="data.state | stepFilter"
        :current="data.step">

        <a-step title="创建项目">
        </a-step>
        <a-step title="部门初审">
        </a-step>
        <a-step title="财务复核">
        </a-step>
        <a-step title="院级终审">
        </a-step>
      </a-steps>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="用户信息">
      <detail-list>
        <detail-list-item term="姓名">{{ data.name }}</detail-list-item>
        <detail-list-item term="性别">{{ data.gender === 0 ? '男':'女' }}</detail-list-item>
        <detail-list-item term="年龄">{{ data.age }}</detail-list-item>
        <detail-list-item term="证件类型">{{ carType }}</detail-list-item>
        <detail-list-item term="身份证">{{ data.carId }}</detail-list-item>
        <detail-list-item term="联系方式">{{ data.phone }}</detail-list-item>
      </detail-list>
    </a-card>

    <!-- 操作 -->
    <a-card
      title="操作日志"
      style="margin-top: 24px"
      :bordered="false"
      @tabChange="(key) => {this.activeTabKey = key}"
    >
      <a-table :columns="operationColumns" :dataSource="data.operationLog" :pagination="false">
        <template v-slot:status="state">
          <a-badge :status="state | statusTypeFilter" :text="state | statusFilter"/>
        </template>
      </a-table>
    </a-card>
  </page-view>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { PageView } from '@/layouts'
import DetailList from '@/components/tools/DetailList'
import { getDoctorEntry, doctorAgree, doctorReject } from '../../../api/doctorEntry'
import { carTypeFilter, departmentFilter } from '@/dictionary'

const DetailListItem = DetailList.Item

const operationColumns = [
  {
    title: '操作类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '操作人',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '执行结果',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作时间',
    dataIndex: 'updatedAt',
    key: 'updatedAt'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark'
  }
]

export default {
  name: 'Advanced',
  components: {
    PageView,
    DetailList,
    DetailListItem
  },
  mixins: [mixinDevice],
  data () {
    return {
      id: '',
      data: {},
      operationColumns,
      operation: null
    }
  },
  computed: {
    carType () {
      return carTypeFilter(this.data.carType)
    },
    department () {
      return departmentFilter(this.data.department)
    },
    status () {
      switch (this.data.state) {
        case 0: {
          switch (this.data.step) {
            case 1: return '等待部门初审'
            case 2: return '等待财务复核'
            case 3: return '等待院级终审'
            default: return '审核中'
          }
        }
        case 1: return '已入职'
        case 2: return '已拒绝'
        default: return '审核中'
      }
    }
  },
  methods: {
    agree () {
      const _this = this
      this.$confirm({
        title: '提醒',
        content: '你确定同意该入职请求么?',
        okText: '同意',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          doctorAgree(_this.data.id, _this.$store.getters.userInfo.name, '同意请求').then(res => {
            _this.$router.push('/doctor/manager')
          })
        },
        onCancel () {}
      })
    },
    reject () {
      const _this = this
      this.$confirm({
        title: '提醒',
        content: '你确定驳回该入职请求么?',
        okText: '驳回',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          doctorReject(_this.data.id, _this.$store.getters.userInfo.name, '驳回请求').then(res => {
            _this.$router.push('/doctor/manager')
          })
        },
        onCancel () {}
      })
    }
  },
  created () {
    console.log('userInfo', this.$store.getters.userInfo)
    this.id = this.$route.query.id
    if (this.id == null || this.id === undefined) {
      this.$router.push('/doctor/manager')
    } else {
      getDoctorEntry(this.id).then(res => {
        this.data = res.result
        console.log('data,', this.data)
      }).catch(err => {
        console.log('err', err)
      })
    }
  },
  filters: {
    statusFilter (state) {
      const statusMap = {
        0: '成功',
        1: '驳回'
      }
      return statusMap[state]
    },
    statusTypeFilter (type) {
      const statusTypeMap = {
        0: 'success',
        1: 'error'
      }
      return statusTypeMap[type]
    },
    stepFilter (state) {
      switch (state) {
        case 0: return 'process'
        case 1: return 'finish'
        case 2: return 'error'
      }
    }
  }
}
</script>

<style lang="less" scoped>

  .detail-layout {
    margin-left: 44px;
  }
  .text {
    color: rgba(0, 0, 0, .45);
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
  }

  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }

  .mobile {
    .detail-layout {
      margin-left: unset;
    }
    .status-list {
      text-align: left;
    }
  }
</style>
